<template>
  <view class="message-box">
    <view class="message-item" v-for="msg in msgHistory" :key="msg.user_id" @click="toDetail(msg.user_id)">
      <view class="img-box">
        <img :src="msg.avatar" alt="">
        
      </view>
      <view class="info-box">
        <view class="name">
          檀健次
        </view>
        <view class="message-detail">
          {{msg.messages[msg.messages.length - 1].content}}
          
        </view>
        
      </view>
      <view class="time-box">
        {{msg.messages[msg.messages.length - 1].createTime | filterTime}}
        
      </view>
      
    </view>
    
  </view>
</template>

<script>
  import {mapState} from 'vuex'
  import dayjs from 'dayjs'
  export default {
    data() {
      return {
        
      };
    },
    filters: {
      filterTime(val) {
        return dayjs(val).format('YYYY/MM/DD')
      }
    },
    computed: {
      ...mapState('m_msg',['msgHistory'])
    },
    methods: {
      toDetail(id) {
        uni.navigateTo({
          url:'/subpages/message-detail/message-detail?id=' + id
        })
      }
    },
    onLoad() {
      this.$store.dispatch('m_msg/getMessageHistory')
    }
  }
</script>

<style lang="scss">
  .message-box {
    .message-item {
      background-color: #fff;
      width: 750rpx;
      height: 200rpx;
      display: flex;
      border-bottom: 1px solid grey;
      .img-box {
        width: 200rpx;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        image {
          width: 180rpx;
          height: 180rpx;
          border-radius: 90rpx;
        }
      }
      .info-box {
        flex: 1;
        height: 100%;
        padding-left: 20rpx;
        .name {
          margin-top: 30rpx;
        }
        .message-detail {
          margin-top: 40rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          font-size: 12px;
          color: lightgrey;
        }
      }
      .time-box {
        padding-top: 30rpx;
        width: 220rpx;
        height: 100%;
      }
    }
  }

</style>
